<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            line-height: 200px;
        }
        .span {
            display: none;
        }
        .username {
            color: red;
        }
    </style>
</head>
<body>
    <input type="text" class="val1">
    <p>UI事件 onload onresize onscroll</p>
    <p>UI事件 onload onresize onscroll</p>
    <p>UI事件 onload onresize onscroll</p>
    <p>UI事件 onload onresize onscroll</p>
    <hr>
    <label>用户名：</label>
    <input type="text" class="username">
    <span class="span">至少6-12位</span>
    <br><br><br><br><br>

    <script>
        var inp = document.querySelector('.val1');
        var inp1 = document.querySelector('.username');
        var span = document.querySelector('.span');

        inp.addEventListener('keydown', function() {
            console.log('keydown');
        })
        inp.addEventListener('keypress', function() {
            console.log('keypress');
        })
        inp.addEventListener('keyup', function() {
            console.log('keyup');
        })

        window.onload = function() {
            // 通常写一些初始化的代码 或者需要 打开页面后自动执行的内容
            console.log('我加载完了');
            // 给用户名的输入框赋值
            inp1.value = 'Hello'
        }

        window.addEventListener('resize', function() {
            console.log('大丈夫能屈能伸');
        })

        window.onscroll = function() {
            console.log('圆润的离开');
        }

        // 文本框聚焦时
        inp1.onfocus = function() {
            inp1.value = '';
            // 显示span
            span.style.display = 'inline-block'
        }

        // 判断用户的输入
        inp1.onchange = function() {
            var str = inp1.value;
            console.log(str.length);
            
        }
    </script>
</body>
</html>